<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Mapbox GL JS map</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<link href="https://api.mapbox.com/mapbox-gl-js/v3.6.0/mapbox-gl.css" rel="stylesheet">
<script src="https://api.mapbox.com/mapbox-gl-js/v3.6.0/mapbox-gl.js"></script>
<style>
body { 
    margin: 0; 
    padding: 0; 
}
#map { 
    position: absolute; 
    top: 0; 
    bottom: 0; 
    width: 100%; 
}
#button {
    position: absolute; 
    top: 25px; 
    /* right: 0px;  */
    z-index: 20;
    height: auto;
    width: 360px;
    display: flex;
    flex-wrap: wrap;
}
.btItem { 
    border-radius: 10px; 
    background-color: #eee; 
    width: auto;
    height: 30px;
    margin: 1px 5px 1px;
    flex: 0 0 38%;
}
</style>
</head>
<body>
<div id="map">
    
</div>
<div id="button">
    <button id="rotate" class="btItem" onclick="rotate()">旋转沙盘</button>
    <button id="rotate" class="btItem" onclick="stopRotate()">停止旋转</button>
    <button id="add" class="btItem" onclick="addFace('yuanqu')">添加园区面图层</button>
    <button id="remove" class="btItem" onclick="remove('yuanqu')">移除园区面图层</button>
    <button id="add" class="btItem" onclick="addFace('admin')">添加街道社区面图层</button>
    <button id="remove" class="btItem" onclick="remove('admin')">移除街道社区面图层</button>
    <button id="add" class="btItem" onclick="addLine('xiancs')">添加线图层</button>
    <button id="remove" class="btItem" onclick="remove('xiancs')">移除线图层</button>
    <button id="add" class="btItem" onclick="addCircle('test')">添加点图层</button>
    <button id="remove" class="btItem" onclick="remove('test')">移除点图层</button>
    <button id="add" class="btItem" onclick="addFace('border')">添加边界图层</button>
    <button id="remove" class="btItem" onclick="remove('border')">移除边界图层</button>
    <button id="add" class="btItem" onclick="addImage('yuan',yuan)">添加圆圈</button>
    <button id="remove" class="btItem" onclick="removeImage('yuan')">移除圆圈</button>
    <button id="add" class="btItem" onclick="addImage('effect',effect)">添加效果图层</button>
    <button id="remove" class="btItem" onclick="removeImage('effect')">移除效果图层</button>
</div>

<script>
	// TO MAKE THE MAP APPEAR YOU MUST
	// ADD YOUR ACCESS TOKEN FROM
	// https://account.mapbox.com

    // addSource
    // id: 源的唯一标识符，用于在图层中引用。
    // source: 源类型，例如 geojson, vector, image, raster, video 等。
    // data: 数据源，通常是文件路径或包含GeoJSON数据的对象。
    // maxzoom: 可选，源的最大缩放级别。
    // minzoom: 可选，源的最小缩放级别。
    // addLayer
    // id: 图层的唯一标识符。
    // type: 图层类型，例如 fill, line, circle, symbol 等。
    // source: 之前定义的源的ID。
    // layout: 图层的布局设置，例如可见性、图标和文本样式等。
    // paint: 图层的绘制样式，包括颜色、透明度等。

    // fill: 用于填充多边形区域，常用于表示区域或边界。
    // line: 用于绘制线条，适合表示道路、河流等线性特征。
    // circle: 用于绘制圆形点，适合表示离散点数据，如位置或事件。
    // symbol: 用于绘制图标或文本，可以用于标注或显示特定的图形标志。

    //高德地图样式
    const gaode = {
        "version": 8,
        "sources": {
            "raster-tiles": {
                "type": "raster",
                "tiles": ["http://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}"],
                "tileSize": 256
            }
        },
        "layers": [{
            "id": "simple-tiles",
            "type": "raster",
            "source": "raster-tiles",
            "minzoom": 0,
            "maxzoom": 22
        }]
    }

    //地图初始化
	mapboxgl.accessToken = 'pk.eyJ1IjoienlsZWFybmluZyIsImEiOiJjbTFqNHN4Nmwwd240MnFwcXY4aXRta281In0.gihMz4c8ekjoUJT116E7bA';
    const map = new mapboxgl.Map({
        container: 'map', // container ID
        center: [117.64,26.26], // starting position [lng, lat]. Note that lat must be set between -90 and 90
        zoom: 8, // starting zoom
        style:gaode,
        projection: "globe", //放大后显示地球球体地图
        pitch: 0,  //俯仰角，默认为0
        bearing: 0 //水平角
    });
    
     // 当地图加载完成时
    map.on('load', () => {
        // 加载GeoJSON数据
        // 园区
        map.addSource('yuanqu', {
            type: 'geojson',
            data: './json/sanming_yuanqu.json' 
        })
        // 社区
        map.addSource('admin', {
            type: 'geojson',
            data: './json/sanming_admin.json' 
        })
        // 点
        map.addSource('test', {
            type: 'geojson',
            data: './json/sanming_test.json' 
        })
        // 线
        map.addSource('xiancs', {
            type: 'geojson',
            data: './json/sanming_xiancs.json' 
        })
        // 边界
        map.addSource('border', {
            type: 'geojson',
            data: './json/border.json' 
        })
        // 圆
        map.loadImage('http://114.67.78.94:8882/minio/wayz/2023/09/04/1695007375138344961_20230904151144A183.png',(error,image)=>{
            if(error) throw error
            map.addImage('yuan',image)
        })
        // 效果图
        map.loadImage('http://114.67.78.94:8882/minio/wayz/2024/09/26/效果2_20240926164250A028.png',(error,image)=>{
            if(error) throw error
            map.addImage('yuan',image)
        })
        // 测试先添加效果图
        map.addLayer({
            'id': 'effect',
            'type': 'raster', // 或 'symbol'，取决于你需要的效果
            'source': {
                'type': 'image',
                'url': effect, // 使用之前添加的图片 ID
                'coordinates': [
                    [116.13141053,27.36146763], //左上
                    [118.90509031,27.36146763], //右上
                    [118.90509031,25.22298878], //右下
                    [116.13141053,25.22298878]  //左下
                ] // 指定图片位置的坐标
            }
        })
        // 测试后添加边界图
        map.addLayer({
            'id': 'border',
            'type': 'fill', // 可以选择不同类型如 'circle', 'line', 'fill'等
            'source': 'border',
            'layout': {},
            'paint': {
                'fill-color': '#888888',
                'fill-opacity': 0.5
            }
        })
    })
    
    map.on('mousemove','border',((e)=>{
        // 改变光标为手型
        map.getCanvas().style.cursor = 'pointer';
        const features = map.queryRenderedFeatures(e.point)
        for(let {properties} of features){
            console.log('properties',properties)
            const featureName = properties.name
            // 更新图层样式以高亮显示
            map.setPaintProperty('border', 'fill-color', [
                'case',
                ['==', ['get', 'name'], featureName], // 检查当前特征 ID
                '#FF0000', // 高亮颜色
                '#888888' // 默认颜色
            ]);
        }
    }))

    map.on('mouseleave','border',()=>{
        map.getCanvas().style.cursor = ''; // 恢复光标
        map.setPaintProperty('border', 'fill-color', '#888888'); // 恢复默认颜色
    })

    // 添加面图层
    function addFace(id){
        // 没有添加则添加
        if(!map.getLayer(id)){
            map.addLayer({
                'id': `${id}`,
                'type': 'fill', // 可以选择不同类型如 'circle', 'line', 'fill'等
                'source': `${id}`,
                'layout': {},
                'paint': {
                    'fill-color': '#888888',
                    'fill-opacity': 0.5
                }
            });
        }
    }

    // 添加线图层
    function addLine(id){
        // 没有添加则添加
        if(!map.getLayer(id)){
            map.addLayer({
                'id': `${id}`,
                'type': 'line', // 可以选择不同类型如 'circle', 'line', 'fill'等
                'source': `${id}`,
                'layout': {},
                'paint': {
                    'fill-color': '#888888',
                    'fill-opacity': 0.5
                }
            });
        }
    }

    // 添加点图层
    function addCircle(id){
        // 没有添加则添加
        if(!map.getLayer(id)){
            map.addLayer({
                'id': `${id}`,
                'type': 'circle', // 可以选择不同类型如 'circle', 'line', 'fill'等
                'source': `${id}`,
                'layout': {},
                'paint': {
                    'fill-color': '#888888',
                    'fill-opacity': 0.5
                }
            });
        }
    }
    let yuan = 'http://114.67.78.94:8882/minio/wayz/2023/09/04/1695007375138344961_20230904151144A183.png'
    let effect = 'http://114.67.78.94:8882/minio/wayz/2024/09/26/效果2_20240926164250A028.png'
    // 添加图片图层
    function addImage(id,url){
        if(!map.getLayer(id)){
            map.addLayer({
                'id': `${id}`,
                'type': 'raster', // 或 'symbol'，取决于你需要的效果
                'source': {
                    'type': 'image',
                    'url': `${url}`, // 使用之前添加的图片 ID
                    'coordinates': [
                        [116.13141053,27.36146763], //左上
                        [118.90509031,27.36146763], //右上
                        [118.90509031,25.22298878], //右下
                        [116.13141053,25.22298878]  //左下
                    ] // 指定图片位置的坐标
                }
            });
        }
    }

    

    // 移除某图层
    function remove(id){
        // 添加了才移除
        if(map.getLayer(id)){
            map.removeLayer(id)
        }
    }

    // 移除图片图层
    function removeImage(id){
        // 添加了才移除
        if(map.getLayer(id)){
            map.removeLayer(id)
        }
        // 移除源
        if (map.getSource(id)) {
            map.removeSource(id); // 移除源
        }
    }



    let timer
    function rotate(){
        console.log("点击了")
        if(!timer){
            timer = setInterval(()=>{
            let bearing = map.getBearing()
            bearing += 1
            map.setBearing(bearing)
        },100)
        }
    }
    function stopRotate(){
        clearInterval(timer)
    }
</script>

</body>
</html>